<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: auto;
            position: relative;
        }
        .box .item{
            width: 45%;
            height: auto;
            position: absolute;

        }
        .box .item:nth-child(1){
            height: 50px;
            background: rgba(125, 20, 230, 1)
        }
        .box .item:nth-child(2){
            height: 70px;
            background: rgba(100, 255, 200, 1)
        }
        .box .item:nth-child(3){
            height: 100px;
            background: rgba(80, 0, 180, 1)
        }
        .box .item:nth-child(4){
            height: 140px;
            background: rgba(60, 80, 160, 1)
        }
        .box .item:nth-child(5){
            height: 70px;
            background: rgba(40, 100, 100, 1)
        }
        .box .item:nth-child(6){
            height: 160px;
            background: rgba(20, 125, 220, 1)
        }
        .box .item:nth-child(7){
            height: 90px;
            background: rgba(123, 222, 220, 1)
        }
        .box .item:nth-child(8){
            height: 100px;
            background: rgba(123, 222, 220, 1)
        }
    </style>
</head>
<body>
    <!-- 低高  高低  试瀑布流 -->
    <div id="root">
    <div class="box">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
        <div class="item">444</div>
        <div class="item">555</div>
        <div class="item">666</div>
        <div class="item">777</div>
        <div class="item lastitem">888</div>
    </div>
</div>
<script src="./js/vue.js"></script>
    <script>
        renderWaterFull('item',10,10);
        function renderWaterFull(select,gbottom,glr){
            var waterItems = document.getElementsByClassName(select);  //所有瀑布流成员
            var carr = [];
            for (var i = 0; i < waterItems.length; i++) {
                var cheight = waterItems[i].clientHeight;
                carr.push({
                    hg:cheight,
                    index:i,
                    top:0,
                    xp:"",
                });
            }
            var newarr = resetArr(carr); // 数据操作完毕，开始重整dom结构
            newarr.map(function(v){
                waterItems[v.index].style.top = v.top+"px";
                waterItems[v.index].style[v.xp] = glr+"px";
            })
            function resetArr(arr){
                var lastarr = ((arr.length % 2) == 0) ? "" : arr[arr.length - 1];
                arr = ((arr.length % 2) == 0) ? arr : arr.splice(0,arr.length - 1);
                //重组顺序
                for (var i = 0; i < arr.length; i = i+2) {
                    var currentEle = arr[i];  //当前元素
                    var otherEle = arr [i+1]  //下一个元素
                    var hang = Math.ceil((i+1) / 2);
                    if((hang % 2) == 0){  //偶数行
                        currentEle.hg <= otherEle.hg ? [arr[i],arr[i+1]] = [arr[i+1],arr[i]] : ""
                    }else{        //奇数行
                        currentEle.hg >= otherEle.hg ? [arr[i],arr[i+1]] = [arr[i+1],arr[i]] : ""
                    }
                }
                lastarr != "" ? arr.push(lastarr) : "";
                //重组后计算top值 0,2,4 偶数
                for (var j = 0; j < arr.length; j++) {
                    var pos = (j % 2) == 0 ? 'left' : 'right';
                    arr[j].top = computedTop(pos,j);
                    arr[j].xp = pos;
                }
                return arr;
                function computedTop(pos,index){
                    var sum = 0;
                    for(var k = pos == "left" ? 0 : 1;k < index; k = k+2){
                    sum+= (arr[k].hg+gbottom)
                    }
                    return sum 
                }
            }
        }
    </script>
</body>
</html>